<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>单表配置服务</title>

    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
    <meta http-equiv="description" content="This is my page"/>

    <!--toast-->
    <link href="../metronic/assets/global/plugins/jquery.toast.css " rel="stylesheet"/>
    <script src="../metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../metronic/assets/global/plugins/jquery.toast.min.js" type="text/javascript"></script>

    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="../metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="../metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="../metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../metronic/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
    <link href="../metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet"
          type="text/css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.min.css"/>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="../metronic/assets/global/plugins/select2/select2.css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link href="../metronic/assets/global/plugins/bootstrap-fileinput/fileinput.css" rel="stylesheet" type="text/css"/>
    <!-- BEGIN THEME STYLES -->
    <link href="../metronic/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-table.css"/>
    <link href="../theme/zTree/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="../metronic/assets/global/plugins/icheck/skins/all.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <style type="text/css">
        .form-group {
            margin-bottom: 5px;
        }

        .help-inline {
            color: red;
        }

        .table {
            border-top: solid 3px #F3565D;
        }

        .table-toolbar {
            margin-bottom: 0px;
        }

        .tableleft {
            margin-left: 90px !important;
        }

        .importData {
            float: right;
            position: relative;
            top: -37px;
            margin-right: 5px;
        }

        .input-cache {
            width: 240px !important;
            margin-bottom: 5px;
        }

        .file-caption, .kv-fileinput-caption {
            /*border-radius: 6px !important;*/
            width: 255px !important;
        }

        .portlet-body {
          height: 100vh;
        }

    </style>

</head>

<body class="page-header-fixed page-quick-sidebar-over-content "
      style="width: 98%; background: #0f0; background-color: transparent;">
<div class="row" style="margin-top:16px;" id="main-container">
    <!--Begin Right Content-->
    <div class="col-md-12">
        <div class="portlet box blue-steel">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-globe"></i>单表查询服务
                </div>
                <div class="actions">
                    <a id="btn_back" href="javascript:;" class="btn btn-default btn-sm">
                        <i class="fa fa-backward"></i> 返回
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <div class="tabbable-custom nav-justified">
                    <ul id="myTab" class="nav nav-tabs nav-justified disable">
                        <li class="active">
                            <a id="a_tab_m" href="#tab_1_1_1" data-toggle="tab">
                                服务信息配置
                            </a>
                        </li>
                        <li>
                            <a id="a_tab_c" href="#tab_1_1_3" data-toggle="tab">
                                服务显示列配置
                            </a>
                        </li>
                        <li>
                            <a id="a_tab_d" href="#tab_1_1_2" data-toggle="tab">
                                服务查询列配置
                            </a>
                        </li>
<!--                        <li>-->
<!--                            <a id="a_tab_e" href="#tab_1_1_4" data-toggle="tab">-->
<!--                                服务缓存配置-->
<!--                            </a>-->
<!--                        </li>-->
                        <li>
                            <a id="a_tab_f" href="#tab_1_1_5" data-toggle="tab" @click="getNewData(1)">
                                精细化配置
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content" style=" overflow:auto;">
                        <div class="tab-pane active" id="tab_1_1_1">
                            <div class="form-horizontal form-body form-inline" style="margin-top: 30px;">
                                <div class="form-group tableleft">
                                    <label class="col-md-4 control-label" style="margin-left:3px;">服务名称:</label>
                                    <div class="col-md-4">
                                        <input id="servicename" name="servicename" type="text"
                                               class="form-control input-inline input-medium" placeholder="请输入服务名称"/>
                                    </div>
                                </div>
                                <div class="form-group" style="margin-left:107px;">
                                    <label class="col-md-4 control-label" style="text-align:right;">&nbsp;&nbsp;&nbsp;&nbsp;服务ID:</label>
                                    <div class="col-md-4">
                                        <input id="guid" name="guid" type="text"
                                               class="form-control input-inline input-medium"
                                               placeholder="服务ID唯一,不能重复"/>
                                    </div>
                                </div>
                                <hr/>
                                <div class="form-group tableleft">
                                    <label class="col-md-4 control-label">数据库标识:</label>
                                    <div class="col-md-4">
                                        <select id="dbKey" name="dbKey" class="form-control input-inline input-medium">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group tableleft">
                                    <label class="col-md-4 control-label" style="margin-left:5px;">&nbsp;&nbsp;&nbsp;表名称:</label>
                                    <div class="col-md-4">
                                        <select id="dtConfigId" name="dtConfigId" type="text"
                                                class="js-example-basic-single input-inline input-medium">
                                        </select>
                                    </div>
                                </div>
                                <hr/>
                                <div class="form-group" style="margin-left:55px;">
                                    <label class="col-md-4 control-label"
                                           style="width:130px;margin-left: 31px;">是否分页:</label>
                                    <div class="col-md-4" style="width:130px;margin-left: 10px;">
                                        <div class="radio-list" style="margin-left:20px;">
                                            <label class="radio-inline">
                                                <input type="radio" name="radioPagintion" id="pagintion1"
                                                       value="0"/>否</label>
                                            <label class="radio-inline">
                                                <input type="radio" name="radioPagintion" id="pagintion2" value="1"
                                                       checked="checked"/>是</label>
                                        </div>
                                    </div>
                                </div>
                                <!--<hr/>-->
                                <!--<div class="form-group tableleft">-->
                                <!--<label class="col-md-4 control-label" style="width:126px;">是否缓存:</label>-->
                                <!--<div class="col-md-4" style="width:250px;">-->
                                <!--<div class="radio-list" style="margin-left:20px;">-->
                                <!--<label class="radio-inline">-->
                                <!--<input type="radio" name="radioSysCatch" id="sysCatch1" value="0" checked="checked"/>否</label>-->
                                <!--<label class="radio-inline">-->
                                <!--<input type="radio" name="radioSysCatch" id="sysCatch2" value="1" />是</label>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--<div class="form-group"  style="margin-left:55px; width:365px;">-->
                                <!--<label class="col-md-4 control-label" >缓存时间:</label>-->
                                <!--<div class="col-md-4" style="width:225px;" >-->
                                <!--<input id="catchtime"  name="catchtime" type="text" readonly="readonly" class="form-control input-inline input-small"/>分钟-->
                                <!--</div>-->
                                <!--</div>-->

                                <div class="form-group" style="margin-left:180px">
                                    <label class="col-md-4 control-label" style="width:160px; margin-left:0px;">响应模式:</label>
                                    <div class="col-md-4" style="width:150px;">
                                        <div class="radio-list" style="margin-left:20px;">
                                            <label class="radio-inline">
                                                <input type="radio" name="radioResponseMode" id="responseMode_single"
                                                        value="1" />单行
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="radioResponseMode" id="responseMode_multiple"
                                                        value="0" checked="checked"/>多行
                                            </label>

                                        </div>
                                    </div>
                                </div>


                                <hr/>
                                <div class="form-group" style="margin-left:130px">
                                    <label class="col-md-3 control-label" style="margin-top:0px;">备注:</label>
                                    <div class="col-md-8">
                                        <textarea id="remark" name="remark" rows="1"
                                                  class="form-control input-inline input-medium"
                                                  style="width:250px;"> </textarea>
                                    </div>
                                </div>
                                <hr/>

                                <!--<div class="form-group"  style="margin-left:88px; width:365px;">-->
                                <!--<label class="col-md-4 control-label" >延时时间:</label>-->
                                <!--<div class="col-md-4" style="width:225px;" >-->
                                <!--<input id="time_delay"  name="time_delay" type="text" value="0" class="form-control input-inline input-small"/>分钟-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--<hr/>-->

                                <button id="btn_save" type="button" class="btn blue-steel  fa fa-save"
                                        style="margin-left:120px;">&nbsp;&nbsp;保&nbsp;&nbsp;存
                                </button>
                                <span id="errorMessage" style="margin-left:15px; color:red;"></span>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab_1_1_2">
                            <iframe id="queryIframe" name="queryIframe"
                                    style="width:100%; height:100vh; border:solid 0px red;" src=""></iframe>
                        </div>
                        <div class="tab-pane" id="tab_1_1_3">
                            <div class="table-toolbar">
                                <div class="btn-group">
                                    <button id="btn_showAdd" class="btn blue-steel"><i class="fa fa-plus"></i>新增显示列
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button id="btn_showUpdate" class="btn blue-steel"><i class="fa fa-plus"></i>修改显示列
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button id="btn_showDel" class="btn blue-steel"><i class="fa fa-remove"></i>删除显示列
                                    </button>
                                </div>
                            </div>
                            <table id="tb_showfieldList"></table>

                        </div>
                        <!--服务缓存-->
                        <div class="tab-pane" id="tab_1_1_4">
                            <div class="table-toolbar">
                                <div class="btn-group">
                                    <button id="btn_cacheAdd" class="btn blue-steel"><i class="fa fa-plus"></i>新增条件配置
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button id="btn_cacheDownload" class="btn blue-steel"><i class="fa fa-download"></i>下载配置模板
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button id="btn_cacheImport" class="btn blue-steel"><i class="fa fa-upload"></i>上传条件配置
                                    </button>
                                </div>
                            </div>
                            <br/>
                            <div id="cacheFieldGroup">
                                <table id="tb_showfieldCacheList" class="table text-nowrap"></table>
                            </div>

                        </div>
                        <!--服务缓存-->

                        <div class="tab-pane" id="tab_1_1_5">


                            <div class="bootstrap-table">
                                <div class="fixed-table-container" style="padding-bottom: 0px;">
                                    <div class="fixed-table-body">
                                        <table id="tb_dataList" class="table table-hover table-striped">
                                            <thead>
                                            <tr>
                                                <th style="text-align: center; vertical-align: middle; ">
                                                    <div class="th-inner">序号</div>
                                                </th>
                                                <th style="text-align: center; vertical-align: middle; ">
                                                    字段名称
                                                </th>
                                                <th style="text-align: center; vertical-align: middle; ">
                                                    字段标题名称
                                                </th>
                                                <th style="text-align: center; vertical-align: middle; ">
                                                    字段类型
                                                </th>
                                                <th style="text-align: center; vertical-align: middle; ">
                                                    是否过滤测站字段
                                                </th>
                                                <th style="text-align: center; vertical-align: middle; ">
                                                    是否过滤时间字段
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item,index) in tableData.list" >
                                                <td style="text-align: center; vertical-align: middle; " >{{index+1}}</td>
                                                <td style="text-align: left; vertical-align: middle; ">{{item.fieldname}}</td>
                                                <td style="text-align: left; vertical-align: middle;  " >{{item.fieldnameCn}}</td>
                                                <td style="text-align: center; vertical-align: middle; " >{{item.fieldtype}}</td>
                                                <td style="text-align: left; vertical-align: middle; " >
                                                    <select class="form-control"  v-model="item.filterStationFlag">
                                                    <option value="YES">是</option>
                                                    <option value="NO">否</option>
                                                </select>
                                                <td style="text-align: left; vertical-align: middle; " >
                                                    <select class="form-control"  v-model="item.filterTimeFlag">
                                                        <option value="YES">是</option>
                                                        <option value="NO">否</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr v-if="tableData.list.length == 0">
                                                <td style="text-align: center; vertical-align: middle; " colspan="8">暂无数据</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <hr/>
                            <div class="table-toolbar">
                                <div style="margin-left: 120px;">
                                    <button class="btn blue-steel"  @click="save">
                                        <i class="fa fa-save"></i>&nbsp;保存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Begin End Content-->


</div>
<!-- Begin隐藏域 -->
<input type="hidden" id="hid_serviceId" name="hid_serviceId"/>
<input type="hidden" id="hid_servertype" name="hid_servertype"/>
<input type="hidden" id="hid_operate" name="hid_operate"/>
<input type="hidden" id="hid_projectid" name="hid_projectid"/>
<!-- End隐藏域 -->
<!-- Begin新增字段弹窗 -->
<div id="FieldModul" class="modal fade" tabindex="-1" aria-hidden="true">
    <div id="FieldDialog" >
        <div class="modal-content">
            <div class="modal-header" style="padding:8px; background-color:#4276A4;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <span class="modal-title" style="color:#fff; font-size:16px;">字段列表</span>
            </div>
            <div class="modal-body">
                <iframe id="fieldIframe" name="fieldIframe" style="width:97%; min-height:500px; border:solid 0px red;"
                        src=""></iframe>
            </div>
        </div>
    </div>
</div>
<!-- End新增字段弹窗 -->
<!-- Begin添加修改服务缓存配置 -->
<div id="EditQueryCacheContent" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" style="width: 58%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">服务缓存条件配置</h4>
            </div>
            <div class="modal-body">
                <div class="scroller" style="height:300px; overflow-y: auto;overflow-x: hidden;" data-always-visible="1"
                     data-rail-visible1="1">
                    <div id="Edit_Parmeter_Value" class="form-horizontal form-body" style="height: auto;">
                        <!--<div class="form-group">-->
                        <!--<label class="col-md-3 control-label">数据库名</label>-->
                        <!--<div class="col-md-9">-->
                        <!--<input id="dbName"  name="dbName" type="text" class="form-control input-inline input-medium" placeholder="请输入数据库名称"/>-->
                        <!--<span id="valide_dbName" class="help-inline"></span>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div style="float: left;">
                    <span id="valide_parmeters" class="help-inline"></span>
                </div>
                <button type="button" data-dismiss="modal" class="btn default">关闭</button>
                <button id="btn_savecachefield" type="button" class="btn blue-steel">保存</button>
            </div>
        </div>
    </div>
</div>

<!--上传Excel-->
<div id="uploadDataExcel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width: 550px !important;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">服务缓存信息上传</h4>
            </div>
            <div class="modal-body" style="height:155px">
                <div class="widget-body">
                    <div class="widget-main">
                        <div class="" style="width: 344px;">
                            <input multiple="" type="file" name="file" id="fieldCachemation"/>
                        </div>
                        <br/>
                        <div class="alert alert-info"
                             style='height:32px;width:255px;padding: 5px 10px; font-family: "Microsoft YaHei"; font-size: 13px; margin-bottom: 0px;margin-top: 10px;'>
                            <strong>提示：</strong><span>请上传.xls或.xlsx文件</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">取消</button>
                <!--<button id="" type="button" class="btn blue-dark">确定</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- End添加修改服务缓存配置 -->
<!--<script src="../metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>-->
<script src="../metronic/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="../metronic/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.min.js"
        type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../metronic/assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-editable.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-editable.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-fixed-columns.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/icheck/icheck.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/select2/select2.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/select2/select2_locale_zh-CN.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script src="../js/zTree/jquery.ztree.core.min.js" type="text/javascript"></script>
<script src="../metronic/custom/commDialogs.js" type="text/javascript"></script>

<script src="../metronic/assets/global/plugins/bootstrap-fileinput/fileinput.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap-fileinput/fileinput_locale_zh.js"
        type="text/javascript"></script>

<script src="../metronic/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        type="text/javascript"></script>
<!-- VUE -->
<script src="../metronic/assets/vue/vue@2.js" type="text/javascript"></script>
<script src="../js/serviceConfigration/singleTableService.js" type="text/javascript"></script>
<script src="../js/serviceConfigration/singleTableServiceFilter.js" type="text/javascript"></script>
</body>
</html>
